<template>
  <div class="">
    <Header :isGoBack="false">
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>

    <div class="grammer-video study-center w1200">
      <div class="header-grammer">
        <span>第二阶段：语法通</span>
      </div>
      <div class="study-conatiner flex-space-be">
        <el-container class="intelligent-study-container">
          <el-aside width="240px">
            <div class="intelligent-study-left mr20 study-cotainer">
              <div class="study-cotainer-title intelligent-item-header">
                <span class="title">选择内容</span>
              </div>
              <div class="study-unit" id="studyVideoType">
                <div class="scorll-box">
                  <ul class="first-list">
                    <li class="first-list-item click" v-for="typeList in videoListData" :key="typeList.id" :class="checkedTypeId == typeList.id ? 'checked-unit' : ''
                      " @click="checkTypeId(typeList.id)">
                      <div class="first-list-item-title">
                        {{ typeList.title }}
                        <i class="el-icon-arrow-right video-title-icon" :class="typeList.isShow ? 'expend-icon' : ''"></i>
                      </div>
                      <el-collapse-transition>
                        <ul class="second-list" v-show="typeList.isShow">
                          <li class="second-list-item transition-bo click"
                            v-for="typeVideoList in typeList.english_grammar_vos" :key="typeVideoList.id" :class="typeList.isShow &&
                                checkedVideoType == typeVideoList.id
                                ? 'checked-item'
                                : ''
                              " @click.stop="checkVideoType(typeVideoList.id)">
                            {{ typeVideoList.title }}
                          </li>
                        </ul>
                      </el-collapse-transition>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-aside>
          <el-main>
            <div class="video-type-list">
              <h4 class="type-title">
                <span>{{ checkedVideoTypeName }}</span>

                <span class="click main-color-text fr right-btn"><span style="margin-right: 10px;"
                    @click="goCorrectionNotebook">错题集</span><span @click="goTestList">我的试题</span></span>
              </h4>
              <div class="video-container scrollbar">
                <div class="video-container-box">
                  <div class="video-list-item" v-for="videoData in checkedVideoList" :key="videoData.id">
                    <div class="video-play-box">
                      <VideoPlay :showId="checkedVideoType + '-' + videoData.id" :vid="videoData.url" :isPlay="false"
                        @clickMasking="clickVideoMasking(videoData)" :number="videoData.number"></VideoPlay>
                    </div>
                    <p class="video-title">{{ videoData.title }}</p>
                  </div>
                </div>
              </div>
              <div class="go-question-btn">
                <el-button class="button button-bg-primary button-large" :disabled="$store.getters.isTeacher"
                  @click="goGrammarQuestion">闯关练习<i class="el-icon-d-arrow-right ml5"></i>
                </el-button>
              </div>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
    <!--    destroy-on-close -->
    <el-dialog title="" :visible.sync="dialogVideoVisible" class="video-dialog" :close-on-click-modal="false"
      :before-close="closeVideoDialog">
      <i class="el-icon-error dialog-close" @click="closeVideoDialog"></i>
      <div>
        <VideoPlay ref="videoPlay" :showId="'-1-' + checkedVideoData.id" :vid="checkedVideoData.url"
          @onPlayOver="onPlayOver" @onVideoPlay="onVideoPlay" @onVideoPause="onVideoPause"
          @onVideoDestory="onVideoDestory"></VideoPlay>
        <h4 class="video-title-dialog">{{ checkedVideoData.title }}</h4>
        <!-- <input type="text" /> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header";
import VideoPlay from "@/components/VideoPlay";
import {
  getGrammarVideo,
  addVideoWatchNum,
  addVideoWatchTime,
} from "@/api/index";
export default {
  data() {
    return {
      checkedBookData: {},
      videoListData: [],
      checkedTypeId: null,
      checkedVideoType: null,
      checkedVideoTypeName: "",
      dialogVideoVisible: false,
      checkedVideoData: {},
      videoTypeActive: [],
      isTypeFixed: false,
    };
  },
  computed: {
    checkedVideoList() {
      let data1 = [],
        data2 = [];
      data1 = this.videoListData.filter((item) => {
        return item.id == this.checkedTypeId;
      });
      if (data1.length > 0) {
        data2 = data1[0].english_grammar_vos.filter((item) => {
          return item.id == this.checkedVideoType;
        });
      }
      if (data2.length > 0) {
        return data2[0].english_grammar_video_vos;
      }
      return [];
    },
  },
  components: {
    Header,
    VideoPlay,
  },
  methods: {
    closeVideoDialog() {
      if (this.$refs.videoPlay.isInitialized) {
        this.$refs.videoPlay.pauseVideo();
      } else {
        this.$refs.videoPlay.destroyedVideo();
      }
      this.dialogVideoVisible = false;
    },
    goGrammarQuestion() {
      this.$router.push({
        name: "grammarQuestion",
        query: {
          checkedTypeId: this.checkedTypeId,
          checkedVideoType: this.checkedVideoType,
          checkedVideoTypeName: this.checkedVideoTypeName,
        },
      });
    },
    onPlayOver() {
      console.log("结束", this.checkedVideoData);
      let data = {
        book_id: this.checkedBookData.book_id,
        video_id: this.checkedVideoData.id,
        subject_id: this.checkedBookData.subject_id,
      };
      addVideoWatchNum(data).then((res) => {
        if (res.code == 200) {
          this.getGrammarVideo();
        }
      });
    },
    onVideoPlay() {
      console.log("播放", this.checkedVideoData);
    },
    onVideoPause() {
      console.log("暂停", this.checkedVideoData);
    },
    onVideoDestory(useTime) {
      console.log("销毁", this.checkedVideoData, useTime);
      if (useTime && useTime > 10) {
        this.addVideoWatchTime(useTime);
        //  console.log("有效时长：", useTime);
      }
    },
    addVideoWatchTime(valid_time) {
      if (this.$store.getters.isTeacher) {
        return;
      }
      let data = {
        book_id: this.checkedBookData.book_id,
        subject_id: this.checkedBookData.subject_id,
        valid_time: valid_time,
        video_id: this.checkedVideoData.id,
      };
      addVideoWatchTime(data);
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    checkTypeId(id) {
      if (this.checkedTypeId == id) {
        //展开收起
        let data = this.videoListData.filter((item) => {
          return item.id == this.checkedTypeId;
        });
        if (data.length > 0) {
          data[0].isShow = !data[0].isShow;
        }
      } else {
        // 收起其他的，展开当前
        this.checkedTypeId = id;
        // 选中当前第一个
        let data1 = [],
          data2 = [];
        data1 = this.videoListData.filter((item) => {
          return item.id == this.checkedTypeId;
        });
        if (data1.length > 0) {
          data2 = data1[0].english_grammar_vos;
        }
        if (data2.length > 0) {
          this.checkedVideoType = data2[0].id;
          this.checkedVideoTypeName = data2[0].title;
        }
        //
        let data = this.videoListData.filter((item) => {
          item.isShow = false;
          return item.id == this.checkedTypeId;
        });
        if (data.length > 0) {
          data[0].isShow = true;
        }
      }
    },

    checkVideoType(id) {
      let data1 = [],
        data2 = [];
      data1 = this.videoListData.filter((item) => {
        return item.id == this.checkedTypeId;
      });
      if (data1.length > 0) {
        data2 = data1[0].english_grammar_vos.filter((item) => {
          return item.id == id;
        });
      }
      if (data2.length > 0) {
        this.checkedVideoType = data2[0].id;
        this.checkedVideoTypeName = data2[0].title;
      }
    },

    getGrammarVideo() {
      let params = {
        subjectId: this.checkedBookData.subject_id,
      };

      getGrammarVideo(params).then((res) => {
        if (res.code == 200 && res.data) {
          res.data.forEach((typeList) => {
            if (typeList.id == this.checkedTypeId) {
              typeList.isShow = true;
            } else {
              typeList.isShow = false;
            }
          });

          this.videoListData = res.data.filter((item1) => {
            let data1 = item1.english_grammar_vos.filter((item2) => {
              let data2 = item2.english_grammar_video_vos.filter((item3) => {
                return item3.id;
              });
              return data2.length > 0;
            });
            return data1.length > 0;
          });
          localStorage.setItem(
            "videoListData",
            JSON.stringify(this.videoListData)
          );
          if (this.videoListData.length > 0 && !this.checkedTypeId) {
            this.checkTypeId(this.videoListData[0].id);
          }
        }
      });
    },
    clickVideoMasking(data) {
      this.checkedVideoData = data;
      this.dialogVideoVisible = true;
      this.$nextTick(() => {
        this.$refs.videoPlay.initVideo();
      });
    },
    showOrHidden(id) {
      let index = this.videoTypeActive.indexOf(id);
      if (index == -1) {
        //没有插入
        this.videoTypeActive.push(id);
      } else {
        //有删除
        this.videoTypeActive.splice(index, 1);
      }
    },
    fixedTypeList() { },
    scrollBehavior() {
      let dom = document.getElementById("app");
      let offsetTop = 143;
      console.log(offsetTop);
      const top = dom.pageYOffset || dom.scrollTop || dom.scrollTop;
      if (top > offsetTop) {
        this.isTypeFixed = true;
      } else {
        this.isTypeFixed = false;
      }
    },
    goCorrectionNotebook() {
      this.$router.push({
        name: "correctionNotebook",
        query:{
          type:1
        }
      })
    },
    goTestList() {
      this.$router.push({
        name: "grammarTestList",
        query: {
          checkedTypeId: this.checkedTypeId,
          checkedVideoType: this.checkedVideoType,
          checkedVideoTypeName: this.checkedVideoTypeName,
        },
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.checkedTypeId = this.$route.query.checkedTypeId;
    this.checkedVideoType = this.$route.query.checkedVideoType;
    this.checkedVideoTypeName = this.$route.query.checkedVideoTypeName;
    this.getGrammarVideo();
  },
  mounted() {
    // document
    //   .getElementById("app")
    //   .addEventListener("scroll", this.scrollBehavior);
  },
  beforeDestroy() {
    // document
    //   .getElementById("app")
    //   .removeEventListener("scroll", this.scrollBehavior);
  },
  watch: {
    checkedTypeId() {
      // console.log(this.checkedVideoList);
      this.videoTypeActive = [];
      if (this.checkedVideoList[0]) {
        this.showOrHidden(this.checkedVideoList[0].id);
      }
    },
  },
};
</script>